@import "../../../assets/styles/img.less";
page{
  padding: 0;
}
.course-empty{
  margin-top: 300rpx;
  background-image: @no-data_gray;
  background-size: 200rpx;
  .no-data-text{
    bottom:60rpx
  }
}
.study-container {
  height: 100%;
  display: flex;
  // position: fixed;
  .left {
    height: 100%;
    width: 180rpx;
    background: rgba(248, 248, 248, 1);
    .repo-scroll {
      height: 100%;
      .repo-list {
        .repo-item {
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          height: 100rpx;
          width: 180rpx;
          font-size: 26rpx;
          color: #797d8a;
          line-height: 32rpx;
          letter-spacing: 0px;
          background: rgba(248, 248, 248, 1);
          .name {
            width: 140rpx;
            text-align: left;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
        .repo-item-active {
          background: #fff;
          font-weight: 700;
          &::before {
            content: "";
            position: absolute;
            bottom: 28rpx;
            left: 0rpx;
            width: 6rpx;
            height: 44rpx;
            background: #4661f4;
            border-radius: 0px 5rpx 5rpx 0px;
          }
        }
        .repo-item-active-up {
          border-bottom-right-radius: 20rpx;
        }
        .repo-item-active-down {
          border-top-right-radius: 20rpx;
        }
      }
    }
  }
  .right {
    width: 100%;
    height: 100%;
    background: #fff;
    .course-scroll {
      height: 100%;
      .course-list {
        .course-item {
          display: flex;
          align-items: center;
          width: 100%;
          height: 190rpx;
          margin-bottom: 10rpx;
          padding: 20rpx 30rpx;

          .logo {
            margin-right: 20rpx;
            width: 150rpx;
            height: 150rpx;
            border-radius: 10rpx;
          }
          .course-info {
            .title {
              width: 330rpx;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              font-size: 28rpx;
              font-weight: 700;
              color: #333333;
              line-height: 40rpx;
            }
            .description {
              width: 330rpx;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              margin-top: 15rpx;
              font-size: 22rpx;
              font-weight: 400;
              color: #858b9c;
              line-height: 34rpx;
            }
            .progress {
              margin-top: 10rpx;
              font-size: 24rpx;
              font-weight: 500;
              text-align: right;
              color: #4661f4;
              line-height: 20px;
            }
          }
        }
      }
    }
  }
}
// @import "../../../assets/styles/variables.less";
// .container {
//   background: @gray-gradient;
//   height: 100%;
// }
// .learn-type{
//   width: 320rpx;
//   height: 290rpx;
//   border-radius: 26rpx;
//   box-shadow: 0px 2rpx 8rpx 0 rgba(72,79,203,0.50);
//   float: left;
//   font-size: 38rpx;
//   color: #fff;
//   overflow: hidden;
//   font-weight: bold;
//   position: relative;
//   margin: 0 30rpx 30rpx 0;
//   image{
//     width: 100%;
//     height: 100%;
//     position: absolute;
//   }
//   .name{
//     padding: 52rpx 0 0 30rpx;
//     position: absolute;
//   }
// }
// :nth-child(2n) {
//   margin-right: 0;
// }
// .fill-line{
//   width: 100%;
//   height: 200rpx;
//   display: flex;
//   align-items: center;
//   .name{
//     padding: 0 0 0 30rpx;
//     position: absolute;
//   }
// }
// .course{
//   padding-top: 20rpx;
//   .course-name{
//     height: 34rpx;
//     line-height: 34rpx;
//     margin-bottom: 30rpx;
//     font-weight: bold;
//     font-size: 34rpx;
//     color: #111111;
//     text-shadow: 0 6rpx 10rpx 0 rgba(13,84,132,0.11);
//   }
// }
// .clearfix:after {
//   content: ".";
//   display: block;
//   height: 0;
//   clear: both;
//   visibility: hidden;
// }
// .circle{
//   width: 84rpx;
//   height: 84rpx;
//   position: absolute;
//   right: 20rpx;
//   bottom: 30rpx;
// }
// .recommend-course{
//   padding: 30rpx;
//   background: #fff;
//   box-shadow: 0 6rpx 10rpx 0 rgba(13, 84, 132, 0.11);
//   border-radius: 20rpx;
//   display: flex;
//   position: relative;
//   align-items: center;
//   image{
//     width: 162rpx;
//     height: 162rpx;
//   }
//   .desc{
//     width: 330rpx;
//     margin-left: 20rpx;
//     height: 162rpx;
//   }
//   .title{
//     height: 45rpx;
//     font-size: 32rpx;
//     font-weight: bold;
//     color: #333333;
//     line-height: 45rpx;
//     margin-bottom: 10rpx;
//     max-width: 428rpx;
//     text-shadow: 0 6rpx 10rpx 0 rgba(13,84,132,0.11);
//     overflow: hidden;
//     white-space: nowrap;
//     text-overflow: ellipsis;
//   }
//   .intro{
//     font-size: 26rpx;
//     color: #999999;
//     text-shadow: 0 6rpx 10rpx 0 rgba(13,84,132,0.11);
//     line-height: 37rpx;
//     height: 107rpx;
//     display: -webkit-box;
//     -webkit-box-orient: vertical;
//     -webkit-line-clamp: 3;
//     overflow: hidden;
//     word-break: break-all;
//   }
// }
